<template>
	<view>
		<view style="height: 80rpx;"></view>
		<view class="navTop">
			<view class="headLogo">
				<!-- <text class="bt">{{notice.title}}</text> -->
				<view class="logo"><image src="../../static/index/inform.png"></image></view>
			</view>
			<view class="title">{{notice.title}}</view>
			<view class="neirong">{{notice.content}}</view>
			<view class="time"> {{notice.publish_time}}</view>
		</view>
		<!-- 抽屉 -->
						<uni-drawer :visible="showRight" mode="right" @close="closeDrawer('right')">
							<!-- #ifndef MP-BAIDU || MP-ALIPAY || MP-TOUTIAO -->
							<scroll-view scroll-y="true" class="scrol" :style="{height:height+'px'}">
							<uni-list >
								<block v-for="(item1,index1) in history" :key="index1">
								<uni-list-item  @tap="getHistory(index1)"  :title="item1.title" />
								</block>
							</uni-list>
							</scroll-view>
							<!-- #endif -->
							<!-- #ifdef MP-BAIDU || MP-ALIPAY || MP-TOUTIAO -->
							<!-- <view class="uni-list">
								<uni-list-item title="Item1" />
								<uni-list-item title="Item2" />
								<uni-list-item class="last-list-item" :show-badge="true" title="Item3" badge-text="12" />
							</view> -->
							<!-- #endif -->
							<view class="close">
								<view class="word-btn" hover-class="word-btn--hover" :hover-start-time="20" :hover-stay-time="70" @click="hide"><text class="word-btn-white">Close</text></view>
							</view>
						</uni-drawer>
	</view>
</template>

<script>
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	export default {
		components: {
			uniDrawer,
			uniList,
			uniListItem,
		},
		data() {
			return {
				notice:{},
				history:"",
				showRight: false,
				showLeft: false,
				height:''
			}
		},
		
		onReady() {
			this.getNotice()
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight - 55;
				}
			})
		},
		onNavigationBarButtonTap(e) {
			this.show('right')
		},
		methods: {
			//选择历史公告
			getHistory(index){
				this.notice = this.history[index];
				this.hide();
			},
			//按时间排序
			 sortKey(array, time) {
			        return array.sort(function(a, b){
			          var x = a[time];
			          var y = b[time];
			          return x > y ? -1 : x < y ? 1 : 0;
			        });
			      },
			//获取历史公告
			getNotice(){
				uni.request({
					url:this.confige.webUrl+"/announcement/listAnnouncement",
					header:{
						'X-Token':this.User.token
					},
					data:{
						userId:this.User.userInfo.id,
					},
					success: (res) => {
						// console.log(res)
						this.history = res.data.result[0].list;
						this.history.sort(function (a,b) {
						        // 按照时间降序
						      return Date.parse(b.publish_time) - Date.parse(a.publish_time)
						    })
					}	
				})
			},
			show(e) {
				console.log("show", e);
				if (e === 'left') {
					this.showLeft = true
				} else {
					this.showRight = true
				}
			},
			hide() {
				console.log("hide");
				this.showLeft = false
				this.showRight = false
			},
			closeDrawer(e) {
				if (e === 'left') {
					this.showLeft = false
				} else {
					this.showRight = false
				}
			},
			
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			// console.log(option)
			this.notice = {
				title:option.title,
				content:option.content,
				publish_time:option.time
			}
		}
	}
</script>

<style lang="less">
	page{ background-color: #F4F4F4;}
	.scrol{
	}
	.close {
		padding: 30rpx;
		position:fixed;
		bottom: 0;
		width: 100%;
	}
	.example {
		padding: 0 15px 15px;
	}
	
	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}
	
	.example-body {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}
	
	/* #endif */
	.example {
		padding: 0 15px;
	}
	
	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}
	
	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}
	
	
	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}
	
	.word-btn-white {
		font-size: 30rpx;
		color: #FFFFFF;
	}
	
	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6rpx;
		height: 60rpx;
		font-size: 25rpx;
		width: 100%;
		/* margin:0rpx 34rpx; */
		background-color: #4AC997;
		
	}
	
	.word-btn--hover {
		background-color: #4ca2ff;
	}
	
	.navTop{
	 width:90%;
	 margin:auto;
	 background-color: #FFFFFF;
	  border-radius: 20upx;
	  }
	.headLogo{ 
		display: flex;
	    justify-content: center;
		width: 100%;
		height: 180rpx;
		border-radius: 20upx 20upx 0upx 0upx;
		background:linear-gradient(to bottom,#F3DDA1, #F7D583);
		}
	.logo{
		   margin-top: -40rpx;
			height: 180rpx;
			width: 180rpx;
			border-radius: 999rpx;
			background-color: #f9e2a5;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				padding: 10rpx;
				border-radius: 999rpx;
				background-color: #FFFFFF;
				width: 130rpx;
				height: 130rpx;
			}
		}
	.title{
		margin:10rpx auto;
		color: #000000;
		width: 94%;
		font-size: 40rpx;
		}
	.time{
	 font-size: 25upx; color: #9a9a9a;
	 text-align: right;
	 padding: 0rpx 30rpx 40rpx 0rpx;
	 }
	 .neirong{
		 font-size: 32rpx;
		 width: 90%;
		 margin: auto;
		 margin-top: 20upx;
		 color: #453A2E;
		 padding-bottom: 50upx;
		 min-height: 500rpx;
	 }
</style>
